<template>
	<view>
		<navBar>
			<template slot="title">
				<view>易展示</view>
			</template>
		</navBar>
		<view class="container u-skeleton">
			<view class="photo u-skeleton-fillet">
				<image src="../../static/image/u35.svg" mode="aspectFill" style="width: 100%; height: 100%;"></image>
			</view>
			<view class="hr">
				<image src="../../static/image/u24.png" mode="" style="width: 100%; height: 100%;"></image>
			</view>
			<view class="cardList">
				<view class="card" v-for="(item,index) in Data">
					<view class="image">
						<image :src="item.imgUrl[0]" mode='aspectFill' @click="showImage(item,0)"
							class="u-skeleton-fillet"></image>
						<image :src="item.imgUrl[1]" mode='aspectFill' @click="showImage(item,1)"
							class="u-skeleton-fillet"></image>
					</view>
					<view class="description u-skeleton-fillet">
						{{item.illustrate}}
						<!-- {{item.description}} -->
					</view>
					<view class="icon u-skeleton-circle">
						<view class="left" @click="share()">
							<u-icon name="share" size="22"></u-icon>分享{{item.shareCount}}
						</view>
						<view class="right">
							<view class="iconItem">
								<u-icon name="heart" size="26" v-if='!isHeart[index]'
									@click="changeHeart(index,1)"></u-icon>
								<u-icon name="heart-fill" color='red' size="26" @click="changeHeart(index,-1)"
									v-if='isHeart[index]'></u-icon>
								{{item.likeCount}}
							</view>
							<view class="iconItem" @click="toComment(item.id)">
								<u-icon name="more-circle" size="26"></u-icon>评论
							</view>
							<!-- <view class="iconItem">
								<u-icon name="coupon" size="26"></u-icon>投票{{item.voteCount}}
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<u-loadmore bg-color="#F5FDEA" :status="loadStatus" @loadmore="addRandomData" v-if="!loading"></u-loadmore>
			<!-- <u-divider style="background-color: #F6FEEB;">到底啦</u-divider> -->
		</view>
		<u-popup v-model="show" mode="center" width="500rpx" height="600rpx" border-radius="14">
			<view class="popup">
				<image :src="popupImage" mode="aspectFill" style="width: 100%;"></image>
			</view>
		</u-popup>
		<u-back-top :duration='duration' bottom='120' right='60' :scroll-top="scrollTop" :icon-style="iconStyle"
			:custom-style='customStyle'></u-back-top>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import comm from "@/comm/comm.js"
	import navBar from "@/components/navBar.vue"
	export default {
		components: {
			navBar
		},
		data() {
			return {
				loadStatus: 'loadmore',
				queryDefault: {
					page: 1,
					pageSize: 10
				},
				duration: 200,
				scrollTop: 0, // 返回顶部
				customStyle: {
					background: '#EFFAEC'
				},
				iconStyle: {
					fontSize: '32rpx',
					// color: '#2979ff',
				},
				// 展示数据
				Data: [{
						"id": 1,
						"userId": "64541168",
						"name": "啊赖",
						"studentId": "0120221483",
						"phone": "13620156658",
						"imgUrl": [
							"http://reggie-xiamou.oss-cn-beijing.aliyuncs.com/img/image-20231031152406870.png",
							"http://reggie-xiamou.oss-cn-beijing.aliyuncs.com/img/1.jpg"
						],
						"illustrate": "餐厅的环境优雅，服务令人满意。食物新鲜美味，口味地道，物超所值。服务员态度亲切，周到细致，给人宾至如归的感觉。值得再次光顾！",
						"isSell": 1,
						"price": 10,
						"isMarket": 1,
						"createTime": "2024-03-28 14:38:24",
						"updateTime": "2024-03-26 17:38:30",
						"likeCount": 374,
						"comments": null
					},
					{
						"id": 2,
						"userId": "64541168",
						"name": "啊豪",
						"studentId": "0120221567",
						"phone": "13620156643",
						"imgUrl": [
							"https://reggie-xiamou.oss-cn-beijing.aliyuncs.com/01942373-803c-4988-b248-a1206d69dec4.jpg",
							"https://reggie-xiamou.oss-cn-beijing.aliyuncs.com/00ea8543-5eca-4a53-a550-766048e2f565.jpg"
						],
						"illustrate": "作品以废弃泡沫箱、空矿泉水瓶和实验废弃环保材料为主，辅以手工剪纸，制作出了纸抽和盆栽一体的手工品，名为“妙纸生花”。",
						"isSell": 0,
						"price": 20,
						"isMarket": 1,
						"createTime": "2024-03-22 16:38:24",
						"updateTime": "2024-03-28 15:39:30",
						"likeCount": 146,
						"comments": null
					},
					{
						"id": 3,
						"userId": "64541168",
						"name": "啊蛋",
						"studentId": "0120221568",
						"phone": "13620156632",
						"imgUrl": [
							"https://reggie-xiamou.oss-cn-beijing.aliyuncs.com/bdb4227d-bace-4611-9485-fd295f5533e6.jpg",
							"https://reggie-xiamou.oss-cn-beijing.aliyuncs.com/66ede34f-34ed-45e9-a77b-54ece0fd1fcf.jpg"
						],
						"illustrate": "这家商店的商品种类丰富，品质优秀，价格实惠。购物体验非常愉快，强烈推荐！",
						"isSell": 0,
						"price": 20,
						"isMarket": 0,
						"createTime": "2024-03-22 15:38:24",
						"updateTime": "2024-03-22 15:39:30",
						"likeCount": 102,
						"comments": null
					},
				],
				show: false, // 浮窗
				isHeart: [false, true, false], //点赞
				popupImage: '', // 浮窗的图片
				loading: true,
				isModel: true
			};
		},
		onLoad() {
			this.queryData()
		},
		onReachBottom() {
			this.isModel = false
			if (this.queryDefault.page * this.queryDefault.pageSize > this.Data.length) {
				this.loadStatus = 'false';
				return
			}
			console.log(1);
			this.loadStatus = 'loading';
			this.queryDefault.page++
			this.queryData()
			// 数据加载
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			/**
			 * 查询数据
			 */
			async queryData() {
				this.loadStatus = 'loading';
				let url = '/works/page';
				let method = 'GET';
				let data = this.queryDefault;
				let header = undefined;
				let isModel = this.isModel

				//请求的数据，如果没有数据可传空对象{}
				await comm.request(url, method, data, header, isModel).then(({
					data
				}) => {
					if (this.Data.length == 3) this.Data = []
					data.data.records.forEach((item) => {
						let randomNum = Math.floor(Math.random() * (700 - 50 + 1) + 50)
						item.imgUrl = item.imgUrl.split(',')
						item.likeCount = item.likeCount + randomNum
					})
					this.Data.push(...data.data.records)
					console.log(this.Data);
					this.loading = false;
				})

			},
			/**
			 * 分享
			 */
			share() {
				if (!navigator.share) {
					alert("您的浏览器不支持此函数！");
				} else {
					navigator.share({
						//要共享的标题
						title: window.location.title,
						//要共享的 URL
						url: window.location.href,
						//要共享的文本
						text: '全网视频免费看，宅男必备！'
					});
				}
			},
			/**
			 * 跳转到文章详情
			 * @param {Object} id 文章id
			 */
			toComment(id) {
				uni.navigateTo({
					url: `/pages/exhibition/comment?id=${id}`
				})
			},
			/**
			 * 图片放大的浮窗
			 * @param {Object} item 当前项的展示数据
			 */
			showImage(item, index) {
				this.show = true
				this.popupImage = item.imgUrl[index]
			},

			/**
			 * 点赞事件
			 * @param {Object} value 点赞1/-1
			 */
			changeHeart(index, value) {
				if (value == 1) {
					this.isHeart[index] = true
					console.log(this.isHeart);
					this.Data[index].likeCount++
					uni.showToast({
						title: '点赞成功',
						duration: 1000,
						icon: 'none'
					});
				} else {
					this.Data[index].likeCount--
					this.isHeart[index] = false
					uni.showToast({
						title: '取消点赞',
						duration: 1000,
						icon: 'none'
					});
				}

			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	.popup {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 15rpx;
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.container {
		box-sizing: border-box;
		width: 100vw;
		height: 100%;
		background: #F6FEEB;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		padding-top: 0;

		.photo {
			width: 100%;
			height: 400rpx;
		}

		.hr {
			height: 60rpx;
			width: 100%;
		}

		.cardList {
			width: 100%;
			flex: 1;

			.card {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				box-shadow: 1 1 1 #EAF6E7;
				border-radius: 20rpx;
				padding: 30rpx;
				padding-bottom: 15rpx;
				margin: 20px 0;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

				.image {
					width: 100%;
					height: 400rpx;
					display: flex;
					justify-content: space-evenly;
					// overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
						border-radius: 20rpx;
					}

					image:nth-of-type(2) {
						margin-left: 30rpx;
					}
				}

				.description {
					color: #6A8F2D;
					text-indent: 2em;
					margin-bottom: 10rpx;
					width: 100%;
					min-height: 60rpx;
					// padding: 15rpx;
					margin: 15rpx;
				}

				.icon {
					display: flex;
					justify-content: space-between;
					width: 100%;

					.left {
						display: flex;
						align-items: center;
					}

					.right {
						width: 180rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.iconItem {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>